<template>
    <section class="add-container wrapper">

        <el-row :gutter="20">
            <el-col :span="24" class="cms-form-box">
                <a class="back" href="javascript:void(0)" @click="back"></a>
                <el-row>
                    <el-col>
                        <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="120px" class="cms-form">

                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="站点全称" prop="siteFullName">
                                        <el-input v-model="form.siteFullName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="站点简称" prop="siteShortName">
                                        <el-input v-model="form.siteShortName"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item label="关键字" prop="keywords">
                                <el-input v-model="form.keywords" placeholder="多个请用“,”分开"></el-input>
                            </el-form-item>

                            <el-form-item label="描述" prop="description">
                                <el-input v-model="form.description"></el-input>
                            </el-form-item>

                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="域名" prop="domain">
                                        <el-input v-model="form.domain"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="域名重定向">
                                        <el-input v-model="form.domainRedirect"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="首页模板">
                                        <el-select v-model="form.indexTemplate" placeholder="请选择" style="width: 100%">
                                            <el-option
                                                    v-for="item in templateOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="24">
                                    <el-form-item>
                                        <el-button v-if="params.siteId" type="primary" @click="update">编 辑</el-button>
                                        <el-button v-else type="primary" @click="create">提 交</el-button>
                                        <el-button @click="back">取 消</el-button>
                                    </el-form-item>
                                </el-col>

                            </el-row>

                        </el-form>
                    </el-col>
                </el-row>

            </el-col>

        </el-row>

    </section>
</template>

<script>
    import { created, updated, selectOne } from '@/api/cms/site'
    import valid from '@/rules'

    const templateOptions = [{
        value: 'default',
        label: '默认'
    }]

    export default {
        name: 'SiteForm',
        data() {
            let required = valid.required('此项必填')
            return {
                /**
                 * siteId
                 */
                params: this.$route.query, //前一个页面带过来的数据
                form: {
                    id: null,
                    siteFullName: null,
                    siteShortName: null,
                    domain: null,
                    keywords: null,
                    description: null,
                    indexTemplate: null,
                    domainRedirect: null
                },
                loading: false,
                rules: {
                    siteFullName: [required],
                    siteShortName: [required],
                    domain: [required]
                },
                templateOptions
            }
        },
        created() {
            let params = this.params
            if(params.siteId) {
                this.form.id = params.siteId
                this.handleUpload()
            }

            this.form.indexTemplate = templateOptions[0].value
        },
        methods: {
            back() {
                this.$router.go(-1)
                this.$store.dispatch('SetSidebar', true)   //收起侧边栏
            },
            handleUpload() {
                selectOne(this.form.id).then(response => {
                    this.form = Object.assign({}, response.data)
                })
            },
            create() {//添加数据
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        created(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.$router.go(-1)
                            } else {
                                this.$notify({
                                    title: '操作失败', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }
                })
            },
            update() {//修改数据
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        updated(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.$router.go(-1)
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .wrapper{
        padding: 0 10px;
        transition: all .2s ease-in-out;
        .cms-form-box{
            border: 1px solid #e9eaec;
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            position: relative;
            transition: all .2s ease-in-out;
            padding: 20px 0;
            .cms-form{
                width: 95%;
            }
        }
    }

</style>